<template>
  <header class="header">
    <!-- 左侧Logo和标题 -->
    <div class="header-left">
      <div class="logo">
        <svg width="32" height="32" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
          <path d="M12 2L2 7l10 5 10-5-10-5z"></path>
          <path d="M2 17l10 5 10-5"></path>
          <path d="M2 12l10 5 10-5"></path>
        </svg>
      </div>
      <h1 class="title">我的应用</h1>
    </div>
    
    <!-- 中间导航链接 -->
    <nav class="header-nav">
      <a href="#" class="nav-link" :class="{ active: currentRoute === 'home' }" @click="navigate('home')">首页</a>
      <a href="#" class="nav-link" :class="{ active: currentRoute === 'modules' }" @click="navigate('modules')">模块管理</a>
      <a href="#" class="nav-link" :class="{ active: currentRoute === 'reports' }" @click="navigate('reports')">数据报表</a>
      <a href="#" class="nav-link" :class="{ active: currentRoute === 'settings' }" @click="navigate('settings')">系统设置</a>
    </nav>
    
    <!-- 右侧用户菜单 -->
    <div class="header-right">
      <div class="user-menu" @click="toggleUserMenu">
        <div class="user-avatar">
          <svg width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
            <path d="M20 21v-2a4 4 0 0 0-4-4H8a4 4 0 0 0-4 4v2"></path>
            <circle cx="12" cy="7" r="4"></circle>
          </svg>
        </div>
        <span class="user-name">管理员</span>
        <svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="menu-arrow">
          <polyline points="6 9 12 15 18 9"></polyline>
        </svg>
        
        <!-- 用户下拉菜单 -->
        <div class="user-dropdown" v-if="userMenuOpen">
          <a href="#" class="dropdown-item">个人资料</a>
          <a href="#" class="dropdown-item">账号设置</a>
          <a href="#" class="dropdown-item">消息通知</a>
          <div class="dropdown-divider"></div>
          <a href="#" class="dropdown-item logout">退出登录</a>
        </div>
      </div>
    </div>
  </header>
</template>

<script>
export default {
  name: 'Header',
  data() {
    return {
      currentRoute: 'home',
      userMenuOpen: false
    }
  },
  methods: {
    // 导航方法
    navigate(route) {
      this.currentRoute = route
      console.log(`导航到: ${route}`)
    },
    // 切换用户菜单
    toggleUserMenu() {
      this.userMenuOpen = !this.userMenuOpen
    }
  },
  mounted() {
    // 点击外部关闭用户菜单
    document.addEventListener('click', (e) => {
      if (!e.target.closest('.user-menu')) {
        this.userMenuOpen = false
      }
    })
  },
  beforeUnmount() {
    // 清理事件监听器
    document.removeEventListener('click', () => {})
  }
}
</script>

<style scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #2c3e50;
  color: #fff;
  padding: 0 20px;
  height: 60px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* 左侧Logo和标题 */
.header-left {
  display: flex;
  align-items: center;
  gap: 15px;
}

.logo {
  color: #3498db;
}

.title {
  font-size: 20px;
  font-weight: 600;
  margin: 0;
}

/* 中间导航 */
.header-nav {
  display: flex;
  gap: 20px;
}

.nav-link {
  color: #ecf0f1;
  text-decoration: none;
  padding: 8px 15px;
  border-radius: 4px;
  transition: background-color 0.3s, color 0.3s;
}

.nav-link:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.nav-link.active {
  background-color: #3498db;
  color: #fff;
}

/* 右侧用户菜单 */
.header-right {
  position: relative;
}

.user-menu {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 15px;
  border-radius: 4px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.user-menu:hover {
  background-color: rgba(255, 255, 255, 0.1);
}

.user-avatar {
  color: #3498db;
}

.user-name {
  font-size: 14px;
  font-weight: 500;
}

.menu-arrow {
  color: #ecf0f1;
  transition: transform 0.3s;
}

.user-menu:hover .menu-arrow {
  transform: rotate(180deg);
}

/* 用户下拉菜单 */
.user-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: #fff;
  color: #333;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  min-width: 180px;
  margin-top: 5px;
  z-index: 100;
}

.dropdown-item {
  display: block;
  padding: 10px 15px;
  text-decoration: none;
  color: #333;
  font-size: 14px;
  transition: background-color 0.3s;
}

.dropdown-item:hover {
  background-color: #f8f9fa;
}

.dropdown-divider {
  height: 1px;
  background-color: #e9ecef;
  margin: 5px 0;
}

.dropdown-item.logout {
  color: #e74c3c;
}

.dropdown-item.logout:hover {
  background-color: #ffebee;
}
</style>